<template>
  <div class="box">
    <h2>Son2 子组件</h2>
    从vuex中获取的值:<label>{{$store.state.count}} - {{count}}</label>
    <br />
    <button @click="subCount(1)">值 - 1</button>
    <button @click="subCount(5)">值 - 5</button>
    <button @click="subCount(10)">值 - 10</button>
    <button @click="changeTitle('我是领导')">改标题</button>
     <button @click="changeCountAction(888)">1s改成888</button>
     <div>{{filterList}}</div>
     <hr>
     <!-- 访问模块中的state -->
     <div>{{user}}</div>
     <div>{{setting}}</div>
     <div>{{userInfo}}</div>
     <button @click="setUser({name:'雄安',age:13})">更新个人数据</button>
     <div>{{theme}} - {{desc}}</div>
     <button @click="setTheme('pink')">更新主题色</button>
     <!-- 访问模块中的getters -->
     <div>{{ UpperCaseName }}</div>
       <button @click="setUserSecond({name:'雄安',age:13})">一秒后更新信息</button>
         <button @click="setThemeSecond('red')">一秒后更新主题色</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Son2Com',
  computed: {
    ...mapState(['count', 'user', 'setting']),
    ...mapState('user', ['userInfo']),
    ...mapState('setting', ['theme', 'desc']),
    ...mapGetters(['filterList']),
    ...mapGetters('user', ['UpperCaseName'])

  },
  methods: {
    ...mapMutations(['subCount', 'changeTitle']),
    ...mapActions(['changeCountAction']),

    // 分模块映射
    ...mapMutations('setting', ['setTheme']),
    ...mapMutations('user', ['setUser']),
    ...mapActions('user', ['setUserSecond']),
    ...mapActions('setting', ['setThemeSecond'])

    // ...mapMutations(['changeTitle']),原始等价写法
    // changeTitle (newTitle) {
    //   this.$store.commit('changeTitle', newTitle)
    // },

  }
}
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>
